<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            widows: 250px;
            height: 250px;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="money">
        <!--v-on 缩写为“@”-->
        <button @click="money++">充值</button>
        <p style="color:red">ta 喜不喜欢你？</p>
        <span >{{bfArr[num] }}{{money%2==0?"喜欢":"不喜欢" }}你</span>
        <button v-on:click="changeNum()">换一换</button>

        <p>{{bfArr[bfArr.length-1]}}</p>
        <input type="text" v-model="val1" v-on:change="addid">
        <!--img-->
        <input type="text" v-model="age">
        <img v-bind:src="'./img/'+age+'.jpg'" alt="">
        <button v-on:click="changeAge()">换一换</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm=new Vue ({
            el:'#app',
            data: {
                val1:'',
                age:1,
                money:9990,
                num:0,
                bfArr: [
                    '朱一龙','肖战','杨洋','王源','杨幂',
                ],
            },
            mounted() {
                //生命周期在调用
                this.changeNum()
                console.log(this.age)
            },
            methods: {
                changeNum () {
                    this.num=Math.round(Math.random()*4)
                    
                },
                changeAge () {
                    console.log(this.val1)
                    this.age++;
                    this.age>4?this.age=1:''
                },
                addid(){
                    this.bfArr.push(this.val1);
                    console.log(this.val1)
                    this.val1=''
                }
            },
        })
    </script>
</body> 
</html>